import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { countSlice, asyncMsg } from '../redux/store'
import { Spin } from 'antd'
export default function Count() {
  // 获取store对象的dispatch方法
  const dispatch = useDispatch()
  // 这个state是过滤之后count组件需要用的数据
  const state = useSelector((state) => {
    // 这里的state是redux中所有的数据
    // console.log(state)
    return state.count
  })
  console.log(state)

  return (
    <div>
      <Spin spinning={state.loading}></Spin>
      <p>{state.count}</p>
      <p>{state.msg}</p>
      <button
        onClick={() => {
          dispatch(countSlice.actions.add(5))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(countSlice.actions.sub(undefined))
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          dispatch(asyncMsg())
        }}
      >
        异步修改msg
      </button>
    </div>
  )
}
